<template>
  <div class="searchButton">
    <div class="search">
      <div class="input" @click="btnClick">
        <i class="iconfont icon-search"></i>
        <span>请输入问答题目/问答内容/关键词</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 返回的路径
  name: 'QuestionSearchButton',
  methods: {
    btnClick () {
      // 携带跳转前页面的当前路由地址传过去,返回直接跳回来
      this.$router.push({
        name: 'questionSearch',
        path: '/home/question/questionSearch',
        params: {
          backPath: this.$route.fullPath
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.searchButton {
  position: relative;
  z-index: 1;
  box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.1);
  .search {
    display: flex;
    justify-content: center;
    align-items: center;
    // background: linear-gradient(to right, #ff6251 0%, #ff9d55 100%);
    background: linear-gradient(to right, #f774bc 0%, #f3bedf 100%);
    height: 54px;
    .input {
      display: flex;
      align-items: center;
      position: relative;
      padding-left: 30px;
      width: 290px;
      height: 34px;
      background-color: #fff;
      border-radius: 16px;
      .icon-search {
        position: absolute;
        top: 52%;
        left: 5%;
        transform: translateY(-50%);
      }
    }
    span {
      padding-left: 5px;
      line-height: 32px;
      font-family: MicrosoftYaHei;
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #d1c9d5;
    }
  }
}
</style>
